<template>
  <div style="height: calc(800px); width: calc(100%);">
    <!-- <div v-if="videoUrl == ''" class="w-full h-full flex-c flex-col">
      <img  src="@/assets/screenimg/null-copy.png" alt="" class="w-[120px] h-[120px]"></img>
      <div>
        未配置监控视频
      </div>

    </div> -->
    <div  v-if="videoUrl == ''" class="w-full h-full flex-c">
      <el-empty description="未配置监控视频"  :imageSize="120"  :image="nullimg"></el-empty>
    </div>
    <div v-else  id="mse" class="!w-full !h-full aspect-video"></div>
  </div>
</template>
<script setup lang="ts">
import videoplay from "@/components/videoplay/video.vue";
import { getVideoops } from '@/api/operate/device-management/index'
import Player, { Events } from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import HlsPlugin from 'xgplayer-hls'
import nullimg from '@/assets/screenimg/null-copy.png'
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})
const videoUrl = ref('')

onMounted(() => {
  getData()


})
const timer = ref(null)
const getData = async () => {
  const res = await getVideoops({ id: props.id })
  console.log("获取视频", res);

  videoUrl.value = res.result.url
  if (res.result.url != '') {
    const player = new Player({
      id: 'mse',
      url: videoUrl.value,
      plugins: [HlsPlugin],
    })

    player.on(Events.PLAY, () => {
      if (res.result.playDuration) {
        timer.value && clearTimeout(timer.value)
        timer.value = setTimeout(() => {
          player.pause()
        }, res.result.playDuration * 60 * 1000);
      }
    })
  }

}
onBeforeUnmount(() => {
  timer.value && clearTimeout(timer.value)
});
</script>
<style lang="scss" scoped>
::v-deep .el-empty__image{
  width: 120px !important;
  height: 120px !important;
}
</style>
